<template>
    <div class="HeaderContainer">
        <div class="headerLeft flex-box">
            <el-icon class="icon" size="20" @click="store.commit('collapseMenu')"><!--这里添加一个点击事件，用于切换其是否压缩菜单,修改属性-->
                <Fold />
            </el-icon><!--注意这里的size属性不需要进行包裹-->
            <ul class="flex-box" style="height: 100%;">
                <!-- 这里的动态class定义的就是如果当前的路径等于当前路由的路径那么就会应用对应selected的样式 -->
                <li v-for="(item, index) in selectMenu" :key="item.path" class="tab flex-box" :class="{selected: item.path === $route.path}">
                    <el-icon size="13">
                        <!-- 这里使用component进行加载组件名称 -->
                        <component :is="item.icon"></component>
                    </el-icon>
                    <router-link  class="text flex-box" :to="{path: item.path}">
                        <span>{{ item.name }}</span><!--这里使用item.name进行获取菜单名称-->
                    </router-link>
                    <el-icon size="13" class="flex-box close" @click="closeTab(item,index)"><Close/></el-icon>
                </li>

            </ul>
        </div>

        <div class="headerRight">
            <el-dropdown>
                <div class="el-dropdown-link flex-box"><!--这个el-dropdown-link的作用和下面的有什么不同-->
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                    <p class="username">admin</p>
                </div>
                <!--下面的东西一定要有，而且不能随意修改，需要使用自己的方法和样式直接命名同样的即可-->
                <span class="el-dropdown-link">
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>Action 1</el-dropdown-item>
                        <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item divided>Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue';
import { useRoute,useRouter } from 'vue-router'; //获取当前的路由信息
const store = useStore();//拿到一个store的实例 
const route = useRoute();//获取url路径
const router = useRouter();//获取路由实例
//拿到对应打开网页的数据
const selectMenu = computed(() => store.state.menu.selectMenu);

//点击关闭tag
const closeTab = (item,index) => {
    store.commit('closeMenu',item)
    //删除非当前页的tag
    if(route.path !== item.path){
        return
    }
    const selectMenuData = selectMenu.value
    //如果删除的是最后一项
    if(index===selectMenuData.length){
        //如果tag只有一个元素
        if(!selectMenuData.length){
            router.push('/');//跳转到首页
        }
        //如果tag有多个元素
        else{
            router.push(selectMenuData[index-1].path)
        }
    }else{
        //如果删除的是中间的tag元素
        router.push(selectMenuData[index].path)
    }
}
</script>

<style lang="less" scoped>
.flex-box {
    //这个相当于是一个模板，在多个地方使用横向排版并且居中的作用
    display: flex;
    align-items: center;
    height: 100%;
}

.HeaderContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background-color: white;
    // padding-left: 25px;

    .headerLeft {
        height: 100%;

        .icon {
            width: 45px;
            height: 100%;
        }

        .icon:hover {
            //这里让icon变成手型，并且在上面的时候变换颜色
            cursor: pointer;
            background-color: #f5f5f5;
        }
        .tab{
            padding: 0 10px;
            height: 100%;
            .text{
                margin:  0 5px;
                font-size: 14px;
                color: #999;
            }
            .close{ //这里设置一个关闭按钮，并且一开始隐藏
                height: 100%;
                visibility: hidden;/*一开始隐藏 */
            }
            &.selected{
                // 与tab统计的时候，如果这个tab被选中，那么就显示一个蓝色背景
                a{
                    color: #409eff;
                }
                i{
                    color:#409eff;
                }
                background-color: #f5f5f5;
            }
            
        }
        .tab:hover{
            background-color: #f5f5f5;
            
            .close{ //这里利用父元素的hover实现了在鼠标放上去的时候样式的切换
                height: 100%;
                cursor: pointer;
                color: #000;
                visibility: visible;/*鼠标放上去的时候显示 */
            }
        }
    }

    .headerRight {
        .username {
            margin: 0px 10px;
        }
    }
    a{
        height: 100%;
        color: #333;
        font-size: 15px;
    }
}
</style>